html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: border-box;
  margin-top: 0;
}

:root{
  --text-color: #666666;
  --bg-color: #3F2AFF; 
  --bg-2-color: #2E2B44;
  --bg-3-color: #212133;
  --gray-color: #85859B;
  --white-color: #fff;
  --lilwhite-color: #EDF0F9;
  --lilgray-color: #555681;
}

/*
ОБЩИЕ СТИЛИ
*/
a {
	color: inherit;
	text-decoration: none;
   position: relative;
   display: inline-block;
}

a:hover{
   color: inherit;
}

.nav__link a:hover::after{
   position: absolute;
   content: ""; /* Добавляемый текст */ 
   background-color: var(--white-color); /* Цвет фона */ 
   height: 2px;
   bottom: 0px; left: 0;
   width: 100%;
}

img {
	max-width: 100%;
}

body {
	font-family: 'Montserrat', "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  color: var(--text-color)
}

ul{
  list-style: none;
  padding: 0;
}

picture img{
   width: 100%;
}


.flex{
  display: flex;
}

h1,h2,h3,h4,p,ul{
  margin: 0;
}

.section{
   margin-bottom: 80px;
}

.section__header{
   font-size: 40px;
   font-weight: 700;
   margin-bottom: 30px;
}


/*
header
*/

.header{
   width: 100%;
   background: var(--bg-color);
   padding: 30px 0;
}


.logo{
   width: 95px;
}

.nav{
   color: var(--white-color);
   margin-left: auto;
}

.nav__link{
   margin-right: 56px;
   font-size: 18px;
}

.nav__link:last-child{
   margin-right: 0;
}


/*
hero
*/

.hero{
   background: radial-gradient(44.07% 44.07% at 67.78% 55.93%, var(--lilgray-color) 0%, var(--bg-3-color) 100%);
   width: 100%;
   color: var(--white-color);
   padding: 15px 0 15px 0;
}

.hero__main{
   align-items: center;
}

.hero__h1{
   font-size: 60px;
   font-weight: 700;
   margin-bottom: 30px;
}

.hero__text{
   font-size: 18px;
   margin-bottom: 70px;
}

.btn{
   color: var(--white-color);
   background: var(--bg-color);
   font-size: 18px;
   padding: 24px 75px;
   border-radius: 20px;
   font-weight: 700;
}

.hero__right img{
   width: 100%;
}

/*
advantage
*/

.adv_first{
   margin-bottom: 30px;
   align-items: center;
}

.advantage__block{
   flex-direction: column;
}

.advantage__header{
   color: var(--bg-2-color);
}

.advantage__text{
   line-height: 24px;
}

.advantage__item{
   align-items: center;
}

.item__img{
   margin-right: 30px;
   width: 80px !important;
   height: 80px;
   flex-shrink: 0;
   /* transition: 0.5s transform ease; */
}

.item__img:hover{
   animation: rotation 0.5s ease backwards;
}

@keyframes rotation {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
  }

.item__text{
   font-weight: 700;
}

/*
teachers
*/

.teachers{
   background: var(--bg-3-color);
   padding: 80px 0;
}

.tearchers__header{
   color: var(--white-color);
}

.profile{
   display: flex;
   flex-direction: column;
}

.profile__img{
   margin-bottom: 30px;
   border-top-left-radius: 30px;
   border-top-right-radius: 30px;
   overflow: hidden;
}

.profile__header{
   margin-bottom: 15px;
   color: var(--white-color);
   font-size: 18px;
   font-weight: 700;
}

.profile__text{
   color: var(--gray-color);
}



/* 
courses
 */

.courses__header{
   color: var(--bg-3-color);
}

.courses__item{
   background: var(--lilwhite-color);
   border-radius: 20px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   height: 100%;
}

.courses__list li:nth-last-child(n+3){
   margin-bottom: 30px;
}

.courses__img{
   margin-bottom: 30px;
   display: block;
}

.courses__item__block{
   padding: 0 30px 30px 30px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   height: 100%;
}

.courses__item__header{
   font-size: 18px;
   font-weight: 700;
   color: var(--bg-3-color);
   margin-bottom: 15px;
}

.courses__text{
   font-size: 16px;
   color: var(--text-color);
   margin-bottom: 50px;
}

.courses__btn{
   margin-top: auto;
   padding: 20px 60px;
   font-size: 16px;
}



/* 
social
 */

.social{
   background: var(--bg-2-color);
   width: 100%;
   padding: 30px;  
}

.social__list{
   display: flex;
   align-items: center;
   justify-content: center;
}

.social__link:not(:last-child){
   margin-right: 35px;
}

.social__link svg{
   width: 24px;
   height: 24px;
}


.skillbox{
   text-align: center;
   width: 100%;
   padding: 3px 0;
   color: var(--bg-2-color);
}

.social__link:hover svg path{
   fill: var(--bg-color);
}



@media (max-width: 992px) {
   .hero__h1{
      font-size: 50px;
   }

   .advantage__item{
      flex-direction: column;
   }

   .item__img{
      margin: 0;
      margin-bottom: 15px;
   }
   
}


@media (max-width: 768px) {
   .hero{
      padding: 80px 0;
   }

   .header div{
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .logo{
      margin-bottom: 30px;
   }
   
   .nav{
      margin-left: 0;
   }

   .hero__right{
      display: none;
   }

   .adv_first{
      align-items: flex-start;
   }

   .courses__btn{
      padding: 20px 48px;
   }


}

@media (max-width: 576px) {
   .section{
      margin-bottom: 50px;
   }

   .logo{
      margin-bottom: 0;
   }

   .nav{
      display: none;
   }

   .section__header{
      font-size: 20px;
   }

   .hero__h1{
      font-size: 30px;
   }

   .btn{
      padding: 20px 54px;
   }

   .adv_first picture{
      display: none;
   }

   .hero{
      padding: 50px 0;
   }

   .advantage__item{
      flex-direction: row;
   }
   .advantage__item:not(:last-child){
      margin-bottom: 30px;
   }

   .item__img{
      margin-right: 30px;
   }

   .teachers{
      padding: 50px 0;
   }

   .profile:not(:last-child){
      margin-bottom: 30px;
   }

   .profile__img{
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
   }
}

